// ==================== EButton.qml ====================
// 一个带有图标（图片或字体）、文字、阴影、点击动画的自定义按钮
// 支持图片图标/字体图标切换、阴影、缩放、旋转等效果
// =====================================================

import QtQuick                // 导入 QtQuick 基础模块，提供 Rectangle、Item、Text、Image 等控件
import QtQuick.Layouts        // 导入布局模块，提供 RowLayout、ColumnLayout 等
import QtQuick.Effects        // 导入效果模块，提供 MultiEffect（阴影）等

// 使用 Rectangle 作为根控件，整体按钮容器
Rectangle {
    id: root

    // 根对象 ID，用于内部引用和外部绑定

    // ==== 样式属性 ====
    property bool backgroundVisible: true            // 是否显示背景
    property color buttonColor: theme.secondaryColor // 背景颜色

    // ==== 尺寸计算属性 ====
    readonly property real contentScale: fullImageMode ? 1.0 : 0.4 // 图标占按钮高度比例，铺满时为1
     property real fontSize: 20                  // 文字大小，略小于图标
    property real hoverScale: 1   // 鼠标悬停时放大比例（外部可设置）

    property bool fullImageMode: false               // 图片是否铺满整个按钮区域

    // ==== 尺寸控制属性 ====
    readonly property int horizontalPadding: 16                     // 内边距
    property color hoverColor: Qt.darker(buttonColor, 1.2) // 悬停时颜色
    property string iconCharacter: "\uf013"          // 字体图标，默认齿轮符号
    property color iconColor: theme.textColor        // 字体图标颜色
    property string iconFontFamily: iconFont.name    // 字体图标所用字体族，默认 FontAwesome
    property bool iconRotateOnClick: false           // 点击时图标是否旋转

    readonly property real iconSize: root.height * contentScale      // 图标大小
    property string iconSource: ""                   // 图片图标路径，默认空
    property real pressedScale: 0.96                 // 按下时缩放比例
    property real radius: 20                         // 圆角半径
    property color shadowColor: theme.shadowColor    // 阴影颜色
    property bool shadowEnabled: true                // 是否显示阴影

    // ==== 外部接口属性 ====
    property string text: "Button"                   // 按钮文字内容，默认 "Button"
    property color textColor: theme.textColor        // 文字颜色
    property bool useIconImage: false                // 是否使用图片作为图标，true=使用图片，false=使用字体
    property alias labelItem: label                  //内部 Text 对象 label 暴露出去了
    property int textLeftPadding: 8


    signal clicked                                   // 点击信号，外部可绑定事件处理函数

    color: "transparent" // 根控件透明，背景由内部 background 控制

    implicitHeight: 52                                               // 默认高度
    implicitWidth: layout.implicitWidth + horizontalPadding * 2      // 默认宽度，内容宽度+左右边距

    // ==== 缩放动画（按下按钮缩小） ====
    transform: Scale {
        id: scale

        // 缩放变换 ID
        origin.x: root.width / 2       // 缩放中心 X 坐标（按钮中心）
        origin.y: root.height / 2      // 缩放中心 Y 坐标（按钮中心）
        xScale: 1.0
        yScale: 1.0
    }

    // ==== 阴影效果 ====
    MultiEffect {
        anchors.fill: background                       // 阴影填充整个背景
        shadowBlur: theme.shadowBlur                   // 阴影模糊半径
        shadowColor: root.shadowColor                  // 阴影颜色
        shadowEnabled: root.shadowEnabled              // 启用阴影
        shadowHorizontalOffset: theme.shadowXOffset   // 阴影水平偏移
        shadowVerticalOffset: theme.shadowYOffset     // 阴影垂直偏移
        source: background                             // 阴影来源
        visible: root.backgroundVisible && root.shadowEnabled // 条件显示
    }

    // ==== 背景矩形 ====
    Rectangle {
        id: background

        // 背景对象
        anchors.fill: parent                   // 填充父控件
        color: mouseArea.containsMouse ? root.hoverColor : root.buttonColor // 悬停或默认颜色
        radius: root.radius                     // 圆角半径
        visible: root.backgroundVisible        // 是否显示背景

        // 动画：颜色渐变
        Behavior on color {
            ColorAnimation {
                duration: 150
            }
        }
        // 动画：透明度渐变
        Behavior on opacity {
            NumberAnimation {
                duration: 100
            }
        }
    }

    // ==== 内容布局（图标 + 文字）====
    RowLayout {
        id: layout

        anchors.centerIn: parent   // 居中布局
        spacing: (root.useIconImage || root.iconCharacter !== "") ? 8 : 0                // 图标和文字间距

        // 图标容器
        Item {
            height: root.iconSize  // 高度等于图标大小

            width:  (root.useIconImage || root.iconCharacter !== "") ? root.iconSize : 0   // 没图标时宽度为0

            // 图片图标
            Image {
                anchors.fill: parent                      // 填充整个容器
                fillMode: Image.PreserveAspectCrop       // 保持比例裁剪
                smooth: true                             // 平滑显示
                source: root.iconSource                   // 图片路径
                visible: root.useIconImage || root.iconCharacter !== ""  //  没图标就不占空间
            }

            // 字体图标
            Text {
                id: iconLabel

                anchors.fill: parent                      // 填充整个容器
                color: root.iconColor                      // 图标颜色
                font.family: root.iconFontFamily          // 字体
                font.pixelSize: root.iconSize             // 字号
                horizontalAlignment: Text.AlignHCenter    // 水平居中

                text: root.iconCharacter                  // 显示字体图标
                verticalAlignment: Text.AlignVCenter      // 垂直居中
                visible: !root.useIconImage && root.iconCharacter !== "" // 条件显示

                // 旋转动画
                transform: Rotation {
                    id: iconRotation

                    angle: 0
                    origin.x: iconLabel.width / 2
                    origin.y: iconLabel.height / 2
                }

                // 点击旋转动画
                PropertyAnimation {
                    id: rotateAnimation

                    duration: 200
                    easing.type: Easing.InOutQuad
                    from: 0
                    property: "angle"
                    target: iconRotation
                    to: 360
                }

                // 松手回弹动画
                SpringAnimation {
                    id: restoreRotation

                    damping: 0.3
                    property: "angle"
                    spring: 3
                    target: iconRotation
                    to: 0
                }
            }
        }

        // 按钮文字
        Text {
            id: label

            Layout.preferredWidth: label.implicitWidth // 宽度随文字自适应
            color: root.textColor                   // 文字颜色
            font.bold: true                         // 加粗
            font.pixelSize: root.fontSize           // 字号
            text: root.text

            horizontalAlignment: root.textAlignment
            verticalAlignment: Text.AlignVCenter

            visible: root.text !== ""               // 没有文字时隐藏

            Layout.leftMargin: root.textLeftPadding
        }
    }

    // ==== 鼠标交互 ====
    MouseArea {
        id: mouseArea

        anchors.fill: parent                       // 填充整个按钮
        hoverEnabled: true                         // 支持鼠标悬停

        // 鼠标离开或者取消点击
        onCanceled: {
            restoreAnimation.restart();             // 取消点击时恢复缩放
            background.opacity = 1.0;
            if (root.iconRotateOnClick) {
                restoreRotation.start();            // 图标旋转恢复
            }
        }

        // 鼠标悬停
        onEntered: {
            scale.xScale = root.pressedScale * root.hoverScale;      // X 方向缩放
            scale.yScale = root.pressedScale * root.hoverScale;       // Y 方向缩放
        }

        //鼠标离开
        onExited: {
            restoreAnimation.restart();     // 使用原来的恢复动画
            background.opacity = 1.0;      // 背景恢复不透明
        }
        // cursorShape: Qt.PointingHandCursor         // 鼠标变小手

        // 鼠标按下
        onPressed: {
            scale.xScale = root.pressedScale;       // X 方向缩放
            scale.yScale = root.pressedScale;       // Y 方向缩放
            background.opacity = 0.85;              // 背景变半透明

            if (root.iconRotateOnClick) {
                // 启用图标旋转时
                rotateAnimation.start();            // 开始旋转动画
            }
        }

        // 鼠标松开
        onReleased: {
            restoreAnimation.restart();             // 恢复缩放动画
            background.opacity = 1.0;              // 背景恢复不透明
            root.clicked();                         // 触发 clicked 信号

            if (root.iconRotateOnClick) {
                restoreRotation.start();            // 图标旋转恢复
            }
        }
    }

    // ==== 缩放恢复动画 ====
    // 平行执行 X/Y 方向的弹性恢复动画（点击松开或取消时恢复按钮大小）
    ParallelAnimation {
        id: restoreAnimation

        SpringAnimation {
            damping: 0.8              // 阻尼系数，值越小弹性越大，动画越晃动；值越大则越快收敛
            property: "xScale"         // 要动画的属性，这里是 X 方向缩放
            spring: 10                // 弹性系数，值越大动画速度越快、弹性越强
            target: scale              // 动画作用对象，这里是按钮的缩放 transform
            to: 1.0                    // 目标值，恢复到原始大小
        }
        SpringAnimation {
            damping: 0.8              // 阻尼系数，同上
            property: "yScale"         // 要动画的属性，这里是 Y 方向缩放
            spring: 10                // 弹性系数，同上
            target: scale              // 动画作用对象，同上
            to: 1.0                    // 目标值，恢复到原始大小
        }
    }
}
